import React, { Component } from 'react'
import {withStyles} from 'material-ui/styles'
import AppBar from 'material-ui/AppBar';
import Tabs, { Tab } from 'material-ui/Tabs';
import Recomms from './recomms/Recomms'

const styles = (theme) => ({
	root: {
		flexGrow: 1,
    // marginTop: theme.spacing.unit * 3,
    // backgroundColor: theme.palette.background.paper,

	}
})

@withStyles(styles)
class AdminBar extends Component {
	constructor(props) {
	  super(props);
	  this.state = {
	  	value: 0,
	  }
	}

	handleChange = (event, value) => {
    this.setState({ value });
  };

	render() {
		const { classes } = this.props;
    const { value } = this.state;
		return(
			<div className={classes.root}>
        <AppBar position="static">
          <Tabs value={value} onChange={this.handleChange.bind(this)}>
            <Tab label="首页推荐" />
            <Tab label="用户管理" />
          </Tabs>
        </AppBar>
        {value === 0 && <Recomms {...this.props}/>}
      </div>
			)
	}
}

export default AdminBar;